<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>Ionic App</title>
    <base href="./">
    
    <!-- 加载 Ionic CSS -->
    <link href="./ionic/css/chunk-ionic.f5c8e0e3.css" rel="stylesheet">
    <link href="./ionic/css/app.7b141fc5.css" rel="stylesheet">
    
    <style>
        #loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #3880ff;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            z-index: 9999;
        }
        
        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(255,255,255,0.3);
            border-top: 4px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 20px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .progress {
            margin-top: 20px;
            font-size: 14px;
            opacity: 0.8;
        }
        
        #app {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="loading">
        <div class="spinner"></div>
        <div>正在加载 Ionic 应用...</div>
        <div class="progress" id="progress">初始化中...</div>
    </div>
    
    <div id="app"></div>
    
    <script>
        console.log('Ionic compatible loader started');
        
        let loadingProgress = document.getElementById('progress');
        let loadingDiv = document.getElementById('loading');
        let appDiv = document.getElementById('app');
        
        function updateProgress(message) {
            loadingProgress.textContent = message;
            console.log('Progress:', message);
        }
        
        function hideLoading() {
            loadingDiv.style.display = 'none';
            console.log('Loading hidden, app should be visible');
        }
        
        function showError(message) {
            loadingDiv.innerHTML = `
                <div style="color: #ff4444; text-align: center; padding: 20px;">
                    <h3>加载失败</h3>
                    <p>${message}</p>
                    <button onclick="location.reload()" style="
                        background: white; 
                        color: #3880ff; 
                        border: none; 
                        padding: 10px 20px; 
                        border-radius: 4px; 
                        margin-top: 10px;
                        cursor: pointer;
                    ">重新加载</button>
                </div>
            `;
        }
        
        // 检查应用是否已经初始化
        function checkAppInitialized() {
            const appElement = document.getElementById('app');
            if (appElement && appElement.innerHTML.trim() !== '') {
                updateProgress('应用初始化成功');
                setTimeout(hideLoading, 500);
                return true;
            }
            return false;
        }
        
        // 加载脚本的通用函数
        function loadScript(src, isModule = false) {
            return new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = src;
                if (isModule) {
                    script.type = 'module';
                }
                
                script.onload = () => {
                    console.log('Script loaded:', src);
                    resolve();
                };
                
                script.onerror = (error) => {
                    console.error('Script failed:', src, error);
                    reject(new Error(`Failed to load ${src}`));
                };
                
                document.head.appendChild(script);
            });
        }
        
        // 尝试加载传统版本的脚本
        async function loadLegacyScripts() {
            try {
                updateProgress('加载核心库 (传统版本)...');
                await loadScript('./ionic/js/chunk-ionic-legacy.b2c76632.js');
                
                updateProgress('加载依赖库 (传统版本)...');
                await loadScript('./ionic/js/chunk-vendors-legacy.30a74f52.js');
                
                updateProgress('加载应用代码 (传统版本)...');
                await loadScript('./ionic/js/app-legacy.55c5c7f4.js');
                
                updateProgress('等待应用初始化...');
                
                // 等待应用初始化
                let attempts = 0;
                const maxAttempts = 20; // 10秒
                
                const checkInterval = setInterval(() => {
                    attempts++;
                    if (checkAppInitialized()) {
                        clearInterval(checkInterval);
                    } else if (attempts >= maxAttempts) {
                        clearInterval(checkInterval);
                        console.log('Legacy scripts loaded but app not initialized, trying modern scripts...');
                        loadModernScripts();
                    }
                }, 500);
                
            } catch (error) {
                console.error('Legacy scripts failed:', error);
                updateProgress('传统版本加载失败，尝试现代版本...');
                loadModernScripts();
            }
        }
        
        // 尝试加载现代版本的脚本
        async function loadModernScripts() {
            try {
                updateProgress('加载核心库 (现代版本)...');
                await loadScript('./ionic/js/chunk-ionic.b2c76632.js', true);
                
                updateProgress('加载依赖库 (现代版本)...');
                await loadScript('./ionic/js/chunk-vendors.9a24fe1a.js', true);
                
                updateProgress('加载应用代码 (现代版本)...');
                await loadScript('./ionic/js/app.39054f79.js', true);
                
                updateProgress('等待应用初始化...');
                
                // 等待应用初始化
                let attempts = 0;
                const maxAttempts = 20; // 10秒
                
                const checkInterval = setInterval(() => {
                    attempts++;
                    if (checkAppInitialized()) {
                        clearInterval(checkInterval);
                    } else if (attempts >= maxAttempts) {
                        clearInterval(checkInterval);
                        showError('应用加载完成但未能正确初始化。可能是兼容性问题。');
                    }
                }, 500);
                
            } catch (error) {
                console.error('Modern scripts failed:', error);
                showError('无法加载应用脚本。请检查文件是否存在。');
            }
        }
        
        // 开始加载流程
        setTimeout(() => {
            updateProgress('开始加载...');
            loadLegacyScripts();
        }, 1000);
        
        // 超时保护
        setTimeout(() => {
            if (loadingDiv.style.display !== 'none') {
                showError('加载超时。应用可能存在兼容性问题。');
            }
        }, 30000); // 30秒超时
    </script>
</body>
</html>